<template>
  <base-nav></base-nav>
  <div class="page-content">
    <div class="container">
      <div class="container-content">
        <div class="wrap">
          <!-- formData:{{ formData }} verifySuccess:{{ verifySuccess }} isAllFiledVerifySuccess:{{ isAllFiledVerifySuccess }} -->
          <div class="section-2">
            <base-filed label="手机号" v-model="formData.xxx3" v-model:verifySuccess="verifySuccess.xxx3" :maxlength="11" type="number" :rule="rule.xxx3" ref="refFiledTel">
              <!-- 右侧内容 -->
              <template v-slot:right>
                <div class="tip-area" @click="showTelTip">
                  <img src="/assets/sigh.png" alt="" />
                </div>
              </template>
            </base-filed>
            <base-filed label="验证码" v-model="formData.xxx4" v-model:verifySuccess="verifySuccess.xxx4" type="number" :rule="rule.xxx4" ref="refFiled4">
              <!-- 右侧内容 -->
              <template v-slot:right>
                <div class="code-area">
                  <span v-show="captchaInfo.msgShow" class="get-code" @click="getMesCode('refForm')">获取验证码</span>
                  <span v-show="!captchaInfo.msgShow" class="countdown">{{ captchaInfo.msgCount }}s</span>
                </div>
              </template>
            </base-filed>
          </div>
          <div class="section-3" :class="{ success: isAllFiledVerifySuccess && !confirmLoading }">
            <!-- <div class="btn btn-next" @click="next">认证-成功</div> -->

            <template v-if="confirmLoading">
              <div class="btn btn-next">认证中 ...</div>
            </template>
            <template v-else>
              <div class="btn btn-next" @click="next">认证</div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="container-footer">此服务能力由福建正孚软件有限公司提供</div>
  </div>
</template>

<script setup>
import { computed, nextTick, ref } from 'vue'
import { useFunctional, useCaptcha } from '@/utils/useHooks'

import { useRouter } from 'vue-router'
const router = useRouter()

let { captchaInfo, startCountdown } = useCaptcha()
let { dialog } = useFunctional()

let formData = ref({})
let verifySuccess = ref({})
let isAllFiledVerifySuccess = computed(() => {
  let { xxx3, xxx4 } = verifySuccess.value
  return xxx3 && xxx4
})
let rule = ref({
  xxx3: [
    { required: true, message: '请输入手机号' },
    { pattern: /^1[3-9][0-9]\d{8}$/, message: '请输入正确的手机号' },
  ],
  xxx4: [{ required: true, message: '请输入验证码' }],
})
function showTelTip() {
  dialog({
    title: '手机号',
    text: `
      1、覆盖范围：中国移动、中国联通、中国电信运营商办理的手机号码<br>
      2、新卡支持核验时间：移动号码当月办理次月支持核验，电信联通号码当周办理次周支持核验<br>
      3、信息核验：姓名、身份证号将与运营商手机号户主实名信息进行对比验证，若信息错误将核验失败<br>
      不支持核验：<br>
      1、虚拟运营商号段<br>
      2、异网转入<br>
      3、未实名手机号
    `,
    confirmButtonText: '知道了',
  })
}

let refFiledTel = ref()
let refFiled4 = ref()
// 获取验证码
function getMesCode() {
  if (!verifySuccess.value.xxx3) {
    refFiledTel.value.getVerifyResult()
    return
  }
  startCountdown()
  //发送验证码
  // sendCaptcha({
  //   phone: formData.value.tel,
  // }).then(() => {
  //   ElMessage.success('已发送验证码')
  // })
}

function toVerifyALLFiled() {
  toVerify3Filed()
  refFiled4.value.getVerifyResult()
}
function toVerify3Filed() {
  refFiledTel.value.getVerifyResult()
}

function next() {
  if (!isAllFiledVerifySuccess.value) {
    toVerifyALLFiled()
    return
  }
  send()
  console.log('请求')
}

let confirmLoading = ref(false)
function send() {
  confirmLoading.value = true
  setTimeout(() => {
    confirmLoading.value = false
    router.push('/sign')
  }, 2000)
}
function nextFail() {
  dialog({
    iconType: 'error',
    title: '认证失败',
    text: `失败原因服务下发`,
    confirmButtonText: '重新认证',
  })
}

function echo() {
  formData.value = {
    xxx1: '叶大凡',
    xxx2: '350121199504150415',
    xxx3: '17689276287',
  }
  nextTick(toVerify3Filed)
}
</script>

<style scoped lang="scss">
.container {
  min-height: calc(100vh - var(--nav-heigth));
  box-sizing: border-box;
  .container-content {
    padding-bottom: 40px;
  }
}
.container-footer {
  margin-top: -40px;
  height: 40px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrap {
  padding: 15px;
  box-sizing: border-box;

  .section-2 {
    margin-top: 10px;
  }
  .section-3 {
    margin-top: 32px;
    .btn {
      transition: all var(--transition-time);
      display: flex;
      align-items: center;
      justify-content: center;
      height: 44px;
      border-radius: 2px;
      font-size: 14px;
    }
    .btn-next {
      color: white;
      background-color: rgba(153, 153, 153, 1);
    }
  }
  .success {
    .btn-next {
      color: white;
      background-color: rgba(0, 0, 0, 1);
    }
  }
}
.tip-area {
  position: absolute;
  top: 50%;
  right: 0;
  height: 40px;
  width: 40px;
  transform: translate(0, -50%);
  // background-color: pink;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 18px;
    height: 18px;
    display: block;
  }
}
.code-area {
  height: 100%;
  position: absolute;
  top: 50%;
  right: calc((40px - 18px) / 2);
  transform: translate(0, -50%);
  // background-color: pink;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  .get-code {
    color: rgba(24, 100, 208, 1);
  }
  .countdown {
    color: black;
  }
}
</style>
